리액트의 불필요한 리렌더링 방지 방법

❓질문

리액트에서 컴포넌트가 불필요하게 리렌더링되는 상황을 방지하기 위한 방법을 설명해 주세요.

💡 조사하기전 내가 알고 있던 내용

먼저 리렌더링을 유발하는 대표적인 사례에는 state나 props가 있습니다.

state는 선언하기전 이게 UI의 리렌더링을 유발하는데 꼭 필요한 존재인지 생각을 하고 여러가지 관련된 상태를 다 따로 둔다기보다 객체의 형태의 상태로 둔다던지
상태에 대한 경각심을 항상 가지면서 써야할것이고

React.memo를 활용하여 컴포넌트를 메모이제이션 하여 받고있는 props 값이 변동 되지 않으면 불필요한 리렌더링 하지않게 합니다

useMemo나 useCallback훅을 활용하여 값과 함수를 메모이제이션 하여 사용 하여 불필요한 리렌더링을 줄이는 방법도 있습니다.
이로 계산비용이 많이 드는 결과물이나 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션 할 수 있습니다.
단 무분별하게 사용하게 된다면 결국 이것도 메모리상에 이전 값들을 저장하여야 하므로 오히려 불필요한 메모리 소모가 될 수 있기떄문입니다.

🏫 정리한 내용

위 방법에 무작정 최적화 기법을 사용하기 보단 개발 도중 테스트를 하듯이 React DevTools등을 이용해 불필요한 리렌더링을 체크하고 성능 저하가 심하거나 하는 부분에도 메모이제이션 방법을 고려 해본다던지 하는 생각도 프론트엔드 개발자라면 좋은 마음가짐일것 같습니다.